<template>
  <view class="time-tab">
    <view class="time-left">货好时间</view>
    <view class="time-center">
      <scroll-view
        class="tab-scroll-view"
        scroll-x
        :scroll-y="false"
        scroll-with-animation
      >
        <view class="tab-list">
          <view 
            :class="value && value.date === item.date ? 'tab-item checked' : 'tab-item'"
            v-for="item in data"
            :key="item.date">
            <view class="top">{{ item.date }}</view>
            <view class="bottom">{{ item.week }}</view>
          </view>
        </view>
      </scroll-view> 
    </view>
    <view class="time-right">
      <uni-icons type="more-filled" size="30"></uni-icons>
    </view>  
  </view>

</template>
<script setup>
  import { ref } from 'vue';
  const { data } = defineProps({
    data: {
      type: Array,
      default: () => []
    },
    value: {
      type: Object,
      default: () => null
    }  
  });
  const emit = defineEmits(['onChange']);

  const onSelected = (item) => {
    emit('onChange', item);
  }

</script>
<style lang="scss" scoped>
.time-tab {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: #fff;
  .time-left {
    width: 115upx;
    height: 120upx;
    font-size: 32upx;
    line-height: 40upx;
    font-weight: bold;
    background-color: #fff;
    position: relative;
    padding: 20upx;
    box-sizing: border-box;
    &::after {
      width: 1px;
      position: absolute;
      right: 0;
      top: 12upx;
      bottom: 12upx;
      content: ' ';
      background-color: #f5f5f5;
    }
  }
  .time-right {
    width: 115upx;
    height: 120upx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #fff;
    position: relative;
    box-sizing: border-box;

    &::before {
      width: 1px;
      position: absolute;
      left: 0;
      top: 12upx;
      bottom: 12upx;
      content: ' ';
      background-color: #f5f5f5;
    }
  }
  .time-center {
    width: 520upx;
    height: 120upx;
    .tab-list {
      white-space: nowrap;
		  width: 100%;
      height: 120upx;
      box-sizing: border-box;
      padding: 20upx;
      .tab-item {
        display: inline-block;
        width: 120upx;
        height: 80upx;
        border-radius: 10upx;
        margin-right: 20upx;
        .top {
          font-size: 24upx;
          text-align: center;
          line-height: 40upx;
        }
        .bottom {
          font-size: 24upx;
          text-align: center;
          line-height: 40upx;
        }
        &.checked {
          background-color: #2C2C2C;
          .top, .bottom {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>